<!-- 信谊下发移库指令编辑弹窗 -->
<template>
  <div>
    <el-dialog
      :title="isUpdate?'修改信谊销毁订单':'添加信谊销毁订单'"
      :visible="visible"
      width="80%"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="82px">
        <el-row>
          <el-col :lg="6" :md="6">
            <el-form-item label-width="92px"
                          label="订单编号:"
                          prop="name">
              <el-input
                disabled
                :maxlength="20"
                v-model="form.salesorderno"
                placeholder="单号自动生成"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="6">
            <el-form-item
                          label="组织:"
                          prop="name">
              <el-select
                clearable
                v-model="form.companycode"
                size="small"
                placeholder="-请选择组织-"
                class="ele-block">
                <el-option v-for="item in codeList" :key="item.code" :label="item.name" :value="item.code"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="4">
            <el-form-item
              label="订单类型:"
              prop="name">
              <el-input
                disabled
                :maxlength="20"
                v-model="form.ordertype"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="4" v-if="false">
            <el-form-item
              label="转出库位:"
              prop="fromlocation">
              <el-input
                disabled
                :maxlength="20"
                v-model="form.fromlocation"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="4">
            <el-form-item
              label="转出库位:"
              prop="tolocation">
              <el-input
                disabled
                :maxlength="20"
                v-model="form.tolocation"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :lg="6" :md="6">
            <el-form-item label-width="92px"
                          label="单据日期:"
                          prop="name">
              <el-date-picker v-model="form.orderdate" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择日期" clearable class="ele-fluid"></el-date-picker>
            </el-form-item>
          </el-col>
<!--          <el-col :lg="6" :md="6">-->
<!--            <el-form-item label-width="102px"-->
<!--                          label="期望交货日期:"-->
<!--                          prop="name">-->
<!--              <el-date-picker v-model="form.expecteddeliverydate" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择日期" clearable class="ele-fluid"></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :lg="6" :md="6">
            <el-form-item
              label="客户代码:"
              >
              <el-input
                :maxlength="20"
                v-model="form.customercode"
                placeholder=""
                disabled
                style="padding-top: 3px"
                clearable>
                <template slot="append">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    class="ele-btn-icon"
                    size="small"
                    @click="openSelect">选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8">
            <el-form-item
              label="客户名称:"
            >
              <el-input
                :maxlength="20"
                disabled
                v-model="form.customername"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :lg="12" :md="12">
            <el-form-item label-width="92px"
                          label="送货地址:"
                          prop="name">
              <el-input
                disabled
                :maxlength="20"
                v-model="form.deliveryaddress"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="6">
            <el-form-item label-width="92px"
                          label="收货联系人:"
                          prop="name">
              <el-input
                disabled
                :maxlength="20"
                v-model="form.contacts"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="6">
            <el-form-item
              label="联系电话:"
            >
              <el-input
                disabled
                :maxlength="20"
                v-model="form.tel"
                placeholder=""
                clearable/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注:" label-width="92px">
          <el-input
            :rows="2"
            clearable
            type="textarea"
            :maxlength="200"
            v-model="form.remark"
            placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="itemList"
        :columns="columns"
        :toolbar="true"
        :need-page="false"
        :selection.sync="selection"
        height="calc(100vh - 520px)">
        <template slot="tolocation" slot-scope="{row}">
          <el-input
            :maxlength="20"
            v-model="row.tolocation"
            placeholder=""
            clearable/>
        </template>
        <template slot="qty" slot-scope="{row}">
          <el-input
            :maxlength="20"
            v-model="row.qty"
            placeholder=""
            clearable/>
        </template>
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="addItem"
          >添加
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeitem"
          >删除
          </el-button>
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit(row)"
            v-if="permission.includes('sys:kdlsinegoodsmovement:edit')">修改
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此信谊下发移库指令吗？"
            @confirm="remove(row)">
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              v-if="permission.includes('sys:kdlsinegoodsmovement:delete')">删除
            </el-link>
          </el-popconfirm>
        </template>
      </ele-pro-table>

      <div slot="footer">
        <el-button @click="updateVisible(false)">取消</el-button>
        <el-button
          type="primary"
          @click="save"
          :loading="loading">保存
        </el-button>
      </div>
    </el-dialog>
    <SelectCust
      :data="current"
      :visible.sync="showSelectCust"
      @done="loadCustinfo"/>
    <SelectInv
      :data="current" :storcode="'1008'"
      :visible.sync="showSelectInv"
      @done="loadInv"/>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SelectCust from './select-cust'
import SelectInv from './select-inv'
export default {
  name: 'KdlSineSoOutboundEdit',
  components: {SelectCust,SelectInv},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      url:'',
      itemList:[],
      codeList:[],
      item:{
        itemcode:'',
        itemname:'',
        batch:'',
        plant:'',
        uom:'',
        qty:'',
        boxflag:'',
        boxno:''
      },
      columns:[
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'itemcode',
          label: '产品编码',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'comdescription',
          label: '通用名',
          showOverflowTooltip: true,
          minWidth: 140,
          align: 'left'
        },
        {
          prop: 'batch',
          label: '批号',
          showOverflowTooltip: true,
          minWidth: 130,
          align: 'center'
        },
        {
          prop: 'qty',
          label: '数量',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
          slot:'qty'
        },
        {
          prop: 'uom',
          label: '单位',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'plant',
          label: '工厂',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'boxflag',
          label: '箱型',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
        {
          prop: 'boxno',
          label: '箱号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center'
        },
      ],
      current: null,
      selection:[],
      // 表单数据
      form: {
        orderdate: new Date(),
        ordertype: 'ZBFE',
        fromlocation:'1008',
        tolocation:'2004',
      },
      // 表单验证规则
      rules: {
        orderno: [
          {required: true, message: '请输入移库指令号', trigger: 'blur'}
        ],
        ordertype: [
          {required: true, message: '请输入业务类型', trigger: 'blur'}
        ],
        orderdate: [
          {required: true, message: '请输入单据日期', trigger: 'blur'}
        ],
        plant: [
          {required: true, message: '请输入工厂', trigger: 'blur'}
        ],
        remark: [
          {required: true, message: '请输入备注', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      where:{},
      // 是否是修改
      isUpdate: false,
      showSelectCust:false,
      showSelectInv:false,
    };
  },
  mounted() {
    this.getOrgList();
  },
  watch: {
    data() {
      console.log(this.data);
      if (this.data) {
        this.form = Object.assign({}, this.data,{fromlocation:'1008',tolocation:'2004',});
        this.isUpdate = true;
        this.loadDetail();
      } else {
        this.form = {};
        this.initForm();
        this.isUpdate = false;
      }
    }
  },
  methods: {
    initForm(){
      if(!this.isUpdate){
        this.form={};
        this.form.ordertype='ZBFE';
        this.form.orderdate = new Date();
        this.itemList=[];
      }
    },
    openSelect(){
      this.showSelectCust = true;
    },
    /**
     * 获取组织列表
     */
    getOrgList() {
      this.$http.get('/dictdata/index?dictId=19&page=1&limit=1000').then(res => {
        this.codeList = res.data.data.records;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    addItem(){
      //let newitem = Object.assign({},this.item);
      //this.itemList.push(newitem);
      this.showSelectInv=true;
    },
    removeitem(){
      if(this.selection.length==0){
        this.$message.info('请选择要删除的药品');
        return;
      }
      this.itemList.splice(this.itemList.findIndex((t) => t.itemcode === this.selection[0].itemcode && t.batch === this.selection[0].batch), 1);

    },
    loadInv(list){
      for(let i=0;i<list.length;i++)
      {
        let newitem = Object.assign({},this.item);
        newitem.itemcode = list[i].materialcode;
        newitem.invname = list[i].comdescription;
        newitem.batch = list[i].vendorbatch;
        newitem.uom = list[i].materialunit;
        newitem.plant = list[i].plant;
        newitem.fromlocation  = list[i].location;
        newitem.storname = list[i].storename;
        newitem.manufacturedate  = list[i].manufacturedate;
        newitem.expireddate  = list[i].expireddate;
        newitem.qty  = list[i].qty;
        newitem.boxflag = list[i].boxflag;
        newitem.boxno = list[i].boxno;
        const index = this.itemList.findIndex(s=>(s.itemcode == newitem.itemcode && s.batch==newitem.batch));
        if(index <0) {
          this.itemList.push(newitem);
        }

      }
    },

    loadDetail(){
      this.$http.get('/kdlsinesooutbound/detail?id='+this.form.id+'&page=1&limit=1000').then(res => {
        this.itemList = res.data.data;
      }).catch(e => {
        this.$message.error(e.message);
      });

    },
    loadCustinfo(cust){
      this.form.customercode = cust.customercode;
      this.form.customername = cust.customername;
      this.form.deliveryaddress = cust.deliveryaddress;
      this.form.contacts = cust.contacts;
      this.form.tel = cust.tel;
    },


    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          let param = {
            sooutbound: this.form,
            sooutboundLines: this.itemList
          }
          this.$http[this.isUpdate ? 'put' : 'post'](this.isUpdate ? '/kdlsinesooutbound/update' : '/kdlsinesooutbound/create', param).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
</style>
